<template>
	<scroll-view class="content" scroll-y="true" enable-back-to-top enable-flex="true" @scrolltolower="onReachBottom">
		<view class="content">
			<view class="title">
				<image class="titleIMG" :src="baseUrl + 'images/static/home/titleBK.png'"></image>

				<view class="titleTxt">
					<view class="txtHead">
						<text>译查查-</text>
						<text class="t1">全球陪同翻译</text>
					</view>
					<view class="titleT2">
						<view>全球海量优质翻译入驻，解决您的出行商务陪同翻译。</view>
						<vie>平台审核担保（拒绝翻译风险），服务安全，先服务后结算。</vie>
					</view>
					<view class="titleSearch" @click="quickMatch">
						<image :src="baseUrl + 'images/static/home/Frame 2@2x.png'" mode="" class="Search"></image>
					</view>
				</view>
			</view>
			<!-- 推荐服务 -->
			<view class="recommend">
				<view class="recommendContent">
					<view class="recommendT1">推荐服务</view>
					<view class="recommendTags">
						<view class="recommendTag" @click="quickMatch">
							<text>人工笔译</text>
							<image :src="baseUrl + 'images/static/home/Frame@2x.png'" mode="" class="hotIcon"></image>
						</view>
						<view class="recommendTag" @click="quickMatch">陪同翻译</view>
						<view class="recommendTag" @click="quickMatch">会议同传交传</view>
						<view class="recommendTag" @click="quickMatch">线上翻译</view>
						<view class="recommendTag" @click="alertymwWB">AI实时翻译（支持电话）</view>
						<view class="recommendTag" @click="quickMatch">人工服务</view>
					</view>
				</view>

				<!-- 城市筛选 -->
				<view class="select">
					<view>推荐</view>
					<view class="selectCity">
						<view :class="{'selected': select === 'city', 'chinaCity': select !== 'city'}"
							@click="selectCity">{{selectCitys}}</view>
						<view :class="{'selected': select === 'country', 'otherCountry': select !== 'country'}"
							@click="selectCountry">{{selectCountrys}}</view>
					</view>
				</view>
			</view>

			<!-- 老师的内容简介 -->
			<view class="MainContent">
				<view class="teacherBox" v-for="item in userList" :key="item._id" @click="ResumeDetail(item._id)">
					<view class="topContent">
						<view class="tlContent">
							<view class="Language">{{item.expertise}}翻译官</view>
							<view class="species">
								<view class="speciesTag">{{item.colleges}}</view>
								<view class="speciesTag">{{item.experience}}年经验</view>
								<view class="speciesTag">{{item.skills}}</view>
							</view>
						</view>
						<view class="trContent">
							<view class="price">
								<text class="ylogo">￥</text>
								<text>{{item.Price[0]}}</text>
								<text>-</text>
								<text>{{item.Price[1]}}</text>
							</view>
							<!-- <view class="timeDuration">已服务时长：3H</view> -->
						</view>
					</view>
					<view class="line"></view>
					<view class="bottomContent">
						<vie class="blContent">

							<image :src="getgenderImage(item.gender)" mode="" class="blImage"></image>
							<text class="name">{{item.name}}</text>
							<image :src="getLevelImage(item.level)" mode="" class="blImage2"></image>
						</vie>
						<vie class="brContent">
							<view class="brTxt">
								<text class="city">{{item.city[0]}}</text>-<text>在线接单中</text>
							</view>
						</vie>
					</view>
				</view>

			</view>
			<!-- 分割线 -->

		</view>
		<view class="no-more-data" v-show="noMoreData">没有更多数据了...</view>
		</view>

	</scroll-view>
</template>

<script>
	import {
		request,
		baseUrl
	} from '../../http/request.js';
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				pageIndex: 1, // 初始页码
				pageSize: 10, // 每页数据量
				userList: [],
				noMoreData: false,
				selectCitys: "全国",
				selectCountrys: "国外",
				select: "city"
			};
		},
		onShow() {

			const selected = uni.getStorageSync("select");
			if (selected != "") {

				switch (selected) {
					case "city":
						const selectedCity = uni.getStorageSync("selectCity");
						console.log('selectedCity99', selectedCity)
						this.select = uni.getStorageSync("select");
						if (selectedCity == '') {
							this.selectCitys = "全国"
						} else {
							this.selectCitys = selectedCity;
							this.pageIndex = 1; // 重置页码为 1
							this.userList = []; // 清空数据列表
							this.getResumeList(selectedCity); // 重新加载数据
						}
						break;
					case "country":
						const selectCountry = uni.getStorageSync("selectCountry");
						console.log('selectedCity99', selectCountry)
						this.select = uni.getStorageSync("select");
						if (selectCountry == '') {
							this.selectCountrys = "国外"
						} else {
							this.selectCountrys = selectCountry;
							this.pageIndex = 1; // 重置页码为 1
							this.userList = []; // 清空数据列表
							this.getResumeList(selectCountry); // 重新加载数据
						}
					default:
						break;
				}
			}else{
				this.getResumeList(this.selectCitys)
			}



		},
		// onLoad() {
		// 	const selected = uni.getStorageSync("select");
		// 	switch (selected) {
		// 		case 'city':
		// 			const selectedCity = uni.getStorageSync("selectCity");

		// 			// 调用获取数据的方法加载更多数据
		// 			this.getResumeList(selectedCity);
		// 			break;
		// 		case 'country':
		// 			const selectCountry = uni.getStorageSync("selectCountry");
		// 			// 调用获取数据的方法加载更多数据
		// 			this.getResumeList(selectCountry); // 重新加载数据
		// 			break;
		// 		default:
		// 			break;
		// 	}
		// },

		methods: {

			getgenderImage(gender) {
				switch (gender) {
					case '男':
						return this.baseUrl + 'images/static/home/man.png';
					case '女':
						return this.baseUrl + 'images/static/home/woman.png';
					default:
						return this.baseUrl + 'images/static/home/man.png';
				}
			},
			getLevelImage(level) {
				switch (level) {
					case '1':
						return this.baseUrl + 'images/static/home/bz.png';
					case '2':
						return this.baseUrl + 'images/static/home/zy.png';
					case '3':
						return this.baseUrl + 'images/static/home/zs.png';
					default:
						return this.baseUrl + 'images/static/home/bz.png'; // 或者您可以返回一个默认图片路径
				}
			},
			// 下拉刷新事件
			// 上拉加载更多事件

			onReachBottom() {
				switch (this.select) {
					case 'city':
						const selectedCity = uni.getStorageSync("selectCity");


						// 调用获取数据的方法加载更多数据
						this.getResumeList(selectedCity);
						break;
					case 'country':
						const selectCountry = uni.getStorageSync("selectCountry");



						// 调用获取数据的方法加载更多数据
						this.getResumeList(selectCountry); // 重新加载数据
						break;
					default:
						break;
				}

			},
			//拿到所有用户的消息
			getResumeList(city) {
				console.log('city', city)
				let seletCITY = "all"
				if (city != "全国" && "国外") {
					seletCITY = city
				}
				console.log('seletCITY', seletCITY)
				this.$http.ResumeHttp.getResume({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					city: seletCITY
				}).then(res => {
					console.log("老师的信息", res.items);
					// 如果返回的数据不为空，则将新数据追加到已有数据列表中
					if (res.items.length > 0) {
						this.userList = [...this.userList, ...res.items];
						this.pageIndex++; // 更新页码
					} else {
						// 如果返回的数据为空，说明已经没有更多数据可加载
						this.noMoreData = true;
					}
				}).catch(error => {
					console.log("错误信息", error);
				});
			},

			//用户详情页面
			ResumeDetail(_id) {
				console.log("用户id", _id)
				uni.navigateTo({
					url: '/pagesResume/resume/resume?_id=' + encodeURIComponent(_id),
					// url:'/pagesResume/resume/resume?account=' + encodeURIComponent(account)',
				})
			},
			// 快速匹配
			quickMatch() {
				if (uni.getStorageSync("_id")) {
					uni.navigateTo({
						url: '/pagesServiece/serviece/serviece'
					})
				} else {
					uni.$u.toast("请先登录");
					setTimeout(function() {
						uni.navigateTo({
							url: '/pagesLogin/register/phoneLogin'
						})
					}, 1000)

				}

			},
			//跳转官网
			alertymwWB() {
				const url = 'https://www.ymwfy.com/'; // 跳转的外部链接
				const encodedUrl = encodeURIComponent(url);
				uni.navigateTo({
					// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
					url: `/pagesLinkOther/LinkOther/LinkOther?url=${encodedUrl}`
				});

			},
			//城市选择
			selectCity() {
				this.pageIndex = 1;
				uni.navigateTo({
					url: '/pagesCityselect/cityselect/cityselect'
				})
			},
			//国外选择
			selectCountry() {
				this.pageIndex = 1;
				uni.navigateTo({
					url: '/pagesCitiesAbroad/CitiesAbroad/CitiesAbroad'
				})
			}

		},
	};
</script>

<style lang="scss">
	.content {

		background-color: #F6F6F6;
	}

	.title {
		position: relative;
		width: 100%;
		height: 516rpx;

		.titleIMG {

			width: 100%;
			height: 100%;
		}
	}

	.titleTxt {
		width: 638rpx;
		height: 304rpx;
		// background-color: pink;
		position: absolute;
		text-align: center;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%);

		.txtHead {
			width: 686rpx;

			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: bold;
			font-size: 40rpx;
			color: #111111;
			line-height: 47rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin: 0 auto;

			.t1 {
				font-size: 34rpx;
			}
		}
	}

	.titleT2 {
		width: 686rpx;
		height: 64rpx;
		margin-top: 16rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.titleSearch {
		margin-top: 32rpx;
	}

	.Search {
		width: 414rpx;
		height: 96rpx;
	}

	.recommend {
		width: 100%;
		height: 100%;
		padding-bottom: 20rpx;
		background-color: #fff;

		.recommendContent {
			width: 686rpx;

			margin: 0 auto;

			.recommendT1 {
				width: 96rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.recommendTags {
				display: flex;
				flex-wrap: wrap;

				.recommendTag {
					padding: 16rpx 16rpx;
					margin-right: 20rpx;
					margin-top: 16rpx;
					height: 66rpx;
					background: #F6F6F6;

					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.hotIcon {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.MainContent {
		width: 100%;

		background-color: #F6F6F6;
		padding: 32rpx 32rpx;

		.teacherBox {
			width: 686rpx;
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #EEEEEE;
			padding: 22rpx 22rpx;
			margin-bottom: 20rpx;

			.topContent {
				display: flex;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.tlContent {
					.Language {
						height: 44rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #111111;
						line-height: 38rpx;
						margin-bottom: 16rpx;
					}

					.species {
						display: flex;

						.speciesTag {
							padding: 0rpx 12rpx;
							width: 120rpx;
							height: 36rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #F7A300;
							line-height: 36rpx;
							text-align: center;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							border: 1rpx solid #F7A300;
							margin-right: 10rpx;
							overflow: hidden;
						}

						.speciesTag:nth-child(1) {
							width: 120rpx;
							overflow: hidden;
						}
					}
				}

				.trContent {
					.price {
						height: 44rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #00A0F7;
						line-height: 38rpx;
						text-align: right;
						margin-bottom: 16rpx;

						.ylogo {
							font-size: 20rpx;
						}
					}

					.timeDuration {
						height: 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.line {
				width: 638rpx;
				height: 1rpx;
				background: #EEEEEE;
				margin-bottom: 16rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.bottomContent {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.blImage {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}

				.name {
					height: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					line-height: 23rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin: 0rpx 16rpx;
				}

				.blImage2 {
					width: 70rpx;
					height: 24rpx;
					vertical-align: middle;
				}

				.brContent {
					height: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 28rpx;
					text-align: center;
					margin-top: 10rpx;
				}
			}

		}
	}

	.no-more-data {
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.select {
		width: 91%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;

		.selectCity {
			display: flex;

			.chinaCity {
				margin-right: 12rpx;
				border-radius: 1rpx solid #F6F6F6;
				background-color: #F6F6F6;
				padding: 8rpx 8rpx;
				border-radius: 3rpx 3rpx;
			}

			.otherCountry {
				border-radius: 1rpx solid #F6F6F6;
				background-color: #F6F6F6;
				padding: 8rpx 8rpx;
				border-radius: 3rpx 3rpx;
			}
		}
	}


	.selected {
		margin-right: 12rpx;
		background-color: #00A0F7;
		/* 选中项的背景颜色 */
		border-radius: 1rpx solid #F6F6F6;
		padding: 8rpx 8rpx;
		border-radius: 3rpx 3rpx;
	}
</style>